<template>
<div class="page" data-page="messageSetin" style="z-index: 2;">
  <div class="navbar">
    <div class="navbar-inner sliding">
            <div class="left" @click="cancelEditCard">
                <a href="#" class="link ">
                    <span class="btn-head-cancel">取消</span>
                </a>
            </div>
      <div class="title sliding">报表设置</div>
            <div class="right">
                <a href="#" class="link " @click="saveEditCard">
                    <span class="btn-head-cancel">完成</span>
                </a> 
            </div>
    </div>
  </div>
  <div class="page-content">
        <div class="list msgSet-parent">
            <ul class="msgSet-ul msgSet-ul-parent" data-parent="0">
                {{#each allData}}
                <li>
                     <label class="item-checkbox item-content"   id="msgSetLi-{{this.objectTypeId}}" >
                       <input {{#if this.status}}checked{{/if}} type="checkbox" class="check-parent" data-checkboxid="{{this.objectTypeId}}" name="msgcheckbox"/>
                       <i class="icon icon-checkbox"></i>
                       <div class="item-inner item-msgSet-inner">
                         <div class="item-title">{{this.name}}</div>
                       </div>
                     </label>
                     <ul class="msgSet-ul msgSet-ul-children"  data-parent="msgSetLi-{{this.objectTypeId}}">
                        {{#each this.nodeMessageStatus}}
                        <li class="msgSet-li-children">
                             <label class="item-checkbox item-content label-children"  id="msgSetLi-{{this.objectTypeId}}">
                               <input {{#if this.status}}checked{{/if}} type="checkbox" class="check-children" data-checkboxid="{{this.objectTypeId}}" name="msgcheckbox"/>
                               <i class="icon icon-checkbox"></i>
                               <div class="item-inner item-msgSet-inner">
                                 <div class="item-title">{{this.name}}</div>
                               </div>
                             </label>
                        </li>
                        {{/each}}
                     </ul>
                </li>
                {{/each}}
            </ul>
        </div>
  </div>
</div>
</template>
<style scoped>
.msg-title{
    padding-right: 56px;   
}
.msgSet-parent{
    margin-top: 0px;
}
.item-inner.item-msgSet-inner:after{
    height: 0;
}
ul.msgSet-ul:after{
     background-color: transparent; 
}
ul.msgSet-ul .item-content{
    padding-left: 20px;
}
ul.msgSet-ul-parent>li{
    border-bottom: 1px solid rgba(0,0,0,.12); 
}
</style>
<script>
    return {
        beforeCreate() {
            var self = this;
            self.getList();
        },
        data: function () {
            return {
                allData: []
            }
        },
        methods: {
            getList: function () {
                var self = this;
                var $ = self.$$;
                common.loading(1);
                Dao.getunitSetinInfo({
                        userName:userInfor.accountName,
                        deviceId:appKeyObj.deviceId,
                  },function(data) {
                    self.allData  =data;
                    common.loading(0);
                },function(e) {
                    common.loading(0);
                    app.methods.showToastBottom("获取报表设置列表失败!");
                }, false);
            },
            saveEditCard: function () {
                var self = this;
                // 新数组和之前已经添加的数组不同
                if (!this.isEqual()){
                    common.loading(1);
                    Dao.updateFireReportStatusBatch({
                        userName:userInfor.accountName,
                        deviceId:appKeyObj.deviceId,
                        onStatusObjectIds:self.getCheckIds(2).toString(),
                        offStatusObjectIds:self.getCheckIds(3).toString()
                    }, function (data) {
                        common.loading(0);
                        app.methods.backToTab();
                    })
                } else {
                    app.methods.backToTab();
                }
            },

            sequence:function(a,b){
                if (a>b) {
                    return 1;
                }else if(a<b){
                    return -1
                }else{
                    return 0;
                }
            },

            isEqual :function(){//判断新老数组是否相等
                var self = this;
                if(self.getCheckIds(1).sort(this.sequence).toString()==self.getCheckIds(2).toString()){
                    return true;
                }else{
                    return false;
                }
            },
            getCheckIds:function(oldOrCurrnet){
                var self = this;
                var oldcheckedArr =[];
                var currentcheckedArr =[];
                var currentUncheckedArr =[];
                if(oldOrCurrnet==1){//开始选中
                    for(let i=0;i<self.allData.length;i++){
                        if(self.allData[i].status==1){
                            oldcheckedArr.push(self.allData[i].id);
                        }
                        if(self.allData[i].nodeMessageStatus && self.allData[i].nodeMessageStatus.length>0){
                            for(let j=0;j<self.allData[i].nodeMessageStatus.length;j++){
                                if(self.allData[i].nodeMessageStatus[j].status==1){
                                    oldcheckedArr.push(self.allData[i].nodeMessageStatus[j].id);
                                }
                            }
                        }
                    }
                    return oldcheckedArr;
                }else if(oldOrCurrnet==2){//当前选中
                    jQuery.each($("input[name='msgcheckbox']"),function(index,obj){
                        if(obj.checked){
                            currentcheckedArr.push(jQuery(obj).data('checkboxid'))
                        }
                    })
                    return currentcheckedArr;
                }else{//当前反选
                    jQuery.each($("input[name='msgcheckbox']"),function(index,obj){
                        if(!obj.checked){
                            currentUncheckedArr.push(jQuery(obj).data('checkboxid'))
                        }
                    })
                    return currentUncheckedArr;
                }
            },
            cancelEditCard: function () {
                var self = this;
                //如果最终数组和开始不一样，则提示保存
                if (!this.isEqual()) {
                    self.openConfirm();
                } else {
                    app.methods.backToTab();
                }
            },

            openConfirm: function () {
                var app = this.$app;
                app.params.dialog.buttonCancel = "取消";
                app.params.dialog.buttonOk = `<span style='color:red;'>不保存</span>`;
                app.dialog.confirm("你修改的报表设置还未保存", "提示",
                    function () {
                        app.methods.backToTab();
                    }, function () {
                });
            },
            checkboxParentClick:function(e){
                let $t = e.currentTarget;
                let _status = $t.checked;
                var _id =  $t.dataset["checkboxid"];
                if(!_status){
                    jQuery("ul [data-parent='msgSetLi-"+_id+"']").find("input[type='checkbox']").prop("checked",false);
                }else{
                    jQuery("ul [data-parent='msgSetLi-"+_id+"']").find("input[type='checkbox']").prop("checked",true);
                }
            },
            checkboxChildClick:function(e){
                let $t = e.currentTarget;
                let _status = $t.checked;
                var _id =  $t.dataset["checkboxid"];
                var $ul_parent =jQuery($t).closest("ul.msgSet-ul-children");
                var allchecked = true;
                var $labels = $ul_parent.find("label.item-checkbox");
                var chcekedNum=0;
                jQuery.each($labels,function(index,obj){
                    let _sta = jQuery(obj).find("input[type='checkbox']")[0].checked;
                    if(!_sta){
                        allchecked =false;
                    }else{
                        chcekedNum++;
                    }
                })
                var pid_data = $ul_parent.attr("data-parent");
                if(allchecked && _status){//兄弟都选中,父是反选的>选中父
                    jQuery("#"+pid_data).find("input[type='checkbox']").prop("checked",true);
                }else{//选中的孩子个数为0>反选父
                    if(chcekedNum==0){
                        jQuery("#"+pid_data).find("input[type='checkbox']").prop("checked",false);
                    }
                }
            }
        },
        on: {
            pageAfterIn: function (e, page) {
               //绑定父点击事件
                var self = this;
                jQuery(".check-parent").off().on('change', function(e){
                    self.checkboxParentClick(e);
                });
                //绑定子点击事件
                jQuery(".check-children").off().on('change', function(e){
                    self.checkboxChildClick(e);
                });
            }
      }  
    }
</script>